<template>
  <div class="tab-content tab-profile">
    <!-- top-search begin -->
    <div class="top-search top-more-search" v-show="showSearch">
      <el-form
        inline
        ref="searchForm"
        label-width="0"
        class="search-form"
        :class="{ 'show-more': showFormMore }"
        :model="searchForm">
        <el-form-item prop="customerCode">
          <el-input
            v-model="searchForm.customerCode"
            clearable
            placeholder="请输入客户编码"
            @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <el-form-item prop="customerName">
          <el-input
            v-model="searchForm.customerName"
            clearable
            placeholder="请输入客户全称"
            @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <el-form-item prop="shortName">
          <el-input
            v-model="searchForm.shortName"
            clearable
            placeholder="请输入客户简称"
            @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <el-form-item prop="contact">
          <el-input
            v-model="searchForm.contact"
            clearable
            placeholder="请输入联系人姓名"
            @keyup.enter.native="search()"></el-input>
        </el-form-item>
        <div class="search-more-item" v-show="isBigWindow || showFormMore">
          <el-form-item prop="salesman">
            <el-input
              v-model="searchForm.salesman"
              clearable
              placeholder="请输入业务员姓名"
              @keyup.enter.native="search()"></el-input>
          </el-form-item>
        </div>
        <el-form-item class="search-btn-part">
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery()">重置</el-button>
          <el-button v-if="!isBigWindow" class="more-btn" type="text" @click="searchShowMore()">{{ !showFormMore ? '更多搜索' : '收起'
          }}<span class="ml5" :class="`el-icon-arrow-${!showFormMore ? 'down' : 'up'}`"></span></el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- top-search end -->
    <!-- right-toolbar begin -->
    <right-toolbar ref="rightToolbar" :showSearch.sync="showSearch" @queryTable="search()">
      <template v-slot:operaBar>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleShow()">新增</el-button>
        <el-button
          type="warning"
          icon="el-icon-download"
          @click="handleShow()">导出</el-button>
      </template>
    </right-toolbar>
    <!-- right-toolbar end -->
    <!-- table begin -->
    <el-table ref="pageTable" class="page-table mt10" :data="tableData" border stripe>
      <el-table-column
        show-overflow-tooltip
        label="客户编码"
        prop="cusCode"
        min-width="106"
        sortable>
      </el-table-column>
      <el-table-column
        label="客户名称"
        min-width="136">
        <template slot-scope="scope">
          <div><span class="color-999">简称：</span>{{ scope.row.cusAbbName }}</div>
          <div><span class="color-999">全称：</span>{{ scope.row.cusName }}</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="业务类型"
        prop="busType"
        min-width="96">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="关联仓库"
        prop="relatedWarehouse"
        min-width="118">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="关联运输产品"
        prop="relatedTransport"
        min-width="138">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        min-width="86">
        <template slot="header">
          <span>账户余额</span>
          <el-tooltip
            effect="dark"
            content="可用余额=账户余额+授信额度"
            placement="top">
            <span class="ml5 tip-icon el-icon-question"></span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="color-success">{{ MixinFormatPrice(scope.row.accountAmount) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="授信额度"
        min-width="86">
        <template slot-scope="scope">
          <span class="color-success">{{ MixinFormatPrice(scope.row.creditAmount) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="可用余额"
        min-width="86">
        <template slot-scope="scope">
          <el-tooltip content="可用余额 = 账户余额 + 授信额度" placement="top">
            <span class="color-success">{{ MixinFormatPrice(calculateAvailableBalance(scope.row)) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="币种"
        prop="currency"
        min-width="68">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="业务员"
        prop="salesmanOne"
        min-width="78">
      </el-table-column>
      <el-table-column label="联系信息" min-width="128">
        <template slot-scope="scope">
          <div><span class="color-999">联系人：</span>{{ scope.row.cusPerson }}</div>
          <div><span class="color-999">电话：</span>{{ scope.row.cusPhone }}</div>
        </template>
      </el-table-column>
      <el-table-column label="创建信息" min-width="172">
        <template slot-scope="scope">
          <div><span class="color-999">创建人：</span>{{ scope.row.createBy }}</div>
          <div><span class="color-999">时间：</span>{{ scope.row.createTime }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="60"
        fixed="right">
        <template slot-scope="scope">
          <div class="opera-row">
            <!-- 编辑按钮 -->
            <el-tooltip content="编辑" placement="top">
              <el-button class="opera-item icon-opera-item" type="text" icon="el-icon-edit-outline" @click="editCustomer(scope.row)"></el-button>
            </el-tooltip>
            <!-- 更多操作悬停菜单 -->
            <el-dropdown trigger="hover" @command="handleCommand($event, scope.row)">
              <el-button class="opera-item icon-opera-item" type="text" icon="el-icon-more"></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="bindWareHouse">绑定仓库</el-dropdown-item>
                <el-dropdown-item command="bindCarryProduct">绑定运输产品</el-dropdown-item>
                <el-dropdown-item command="accountManage">账号管理</el-dropdown-item>
                <el-dropdown-item command="getApiInfo">获取API信息</el-dropdown-item>
                <el-dropdown-item command="removeCustomer">删除客户</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- table end -->
    <!-- page-pagination begin -->
    <pagination
      class="page-pagination"
      :total="total"
      :page-size="pageSize"
      :page-index="pageIndex"
      @change="pageChange">
    </pagination>
    <!-- page-pagination end -->

    <!-- dialog-customer begin -->
    <dialog-customer :show.sync="dialogCustomer" :id="customerId" :orgId="customerOrgId" :type="dialogType" @refresh="search"></dialog-customer>
    <!-- dialog-customer end -->
  </div>
</template>

<script>
import mixin from '@/utils/filtermixin/mixin';
import listmixin from '@/utils/list-mixin';
import DialogCustomer from './components/dialog-customer';
import * as API_Customer  from "@/api/archives/customer";

export default {
  name: 'tab-profile',
  components: {
    DialogCustomer
  },
  mixins: [mixin, listmixin],
  data () {
    return {
      searchForm: {
        customerCode: undefined,
        customerName: undefined,
        shortName: undefined,
        contact: undefined,
        salesman: undefined
      },
      tableData: [],
      // 可不编辑信息
      customerId: undefined,
      customerOrgId: undefined,
      // 客户弹层
      dialogCustomer: false,
      dialogType: undefined,

      // 分页属性
      total: 0, // 记录总条数
      pageSize: 20, // 每页显示条数
      pageIndex: 1 // 当前页
    };
  },
  mounted () {
    // 获取页面数据
    this.search();
  },
  methods: {
    /**
      * @date 2025/06/30
      * @author wolfMan
      * @description {页面查询}
    */
    search (_type) {
      let _params = this.MixinFilterParams(this.MixinClone(this.searchForm));
      if (_type !== 'selectPage') {
        this.pageIndex = 1; // 重置翻页当前页
      };
      this.getPageData(_params);
    },
    /**
      * @date 2025/06/30
      * @author wolfMan
      * @description {获取页面数据}
    */
    getPageData (params) {
      let _params = {
        ...params,
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      };
      API_Customer.getListService(_params).then(response => {
        if (response && response.code == 200) {
          this.tableData = response.rows || [];
          this.total = response.total;
        } else {
          this.$msgError(response.msg);
        };
      });
    },
    /**
      * @date 2025/06/30
      * @author wolfMan
      * @description {计算可用余额 (账户余额 + 授信额度)}
    */
    calculateAvailableBalance(row) {
      const accountAmount = parseFloat(row.accountAmount || 0);
      const creditAmount = parseFloat(row.creditAmount || 0);
      return accountAmount + creditAmount;
    },
    /**
      * @date 2025/06/30
      * @author wolfMan
      * @description {新增费用补录}
    */
    /**
     * @date 2023/05/18
     * @author yjy
     * @description {修改弹层}
     */
    handleShow(_type, _row) {
      this.customerId = _row ? _row.id : undefined;
      this.customerOrgId = _row ? _row.orgId : undefined;
      this.dialogType = _type;
      this.dialogCustomer = true;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>